<template>
    <div class="app-container">
      <!-- 搜索框和按钮 -->
    <div class="search-buttons-container">
      <el-input placeholder="请输入搜索关键字" v-model="searchKeyword"></el-input>
      <el-button type="danger" @click="batchDelete">批量删除</el-button>
      <el-button type="primary" @click="showDialog">添加</el-button>
      <el-button type="success" @click="exportExcel">导出Excel</el-button>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="添加项目" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="form.projectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标准编号（含年号）" :label-width="formLabelWidth">
          <el-input v-model="form.standardNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>
  
  
      <!-- 项目列表 -->
      <el-table :data="projectList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="序号" label="序号" width="180"> </el-table-column>
        <el-table-column prop="项目名称" label="项目名称" width="180"> </el-table-column>
        <el-table-column prop="标准编号（含年号）" label="标准编号（含年号）"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, projectList)" type="text" size="small">
              删除
            </el-button>
            <el-button @click.native.prevent="viewDetails(scope.row)" type="text" size="small">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页器 -->
      <el-pagination background layout="prev, pager, next" :total="40"> </el-pagination>
  
      
    </div>
  </template>
  
  <script>
  import XLSX from 'xlsx';

  export default {
    data() {
      return {
        searchKeyword: '',
        projectList: [
          { 序号: '1', 项目名称: '基本要求', '标准编号（含年号）': 'GB 19083-2023 4.1' },
          { 序号: '2', 项目名称: '口罩带连接强度', '标准编号（含年号）': 'GB 19084-2023 4.2' },
          { 序号: '3', 项目名称: '微生物指标', '标准编号（含年号）': 'GB 19085-2023 4.8' },
          // ... 其他数据行
        ],
        dialogVisible: false,
      form: {
        projectName: '',
        standardNumber: '',
      },
      formLabelWidth: '120px',
      multipleSelection: [] // 用于存储选中的项目
      };
    },
    methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDelete() {
      this.$confirm('此操作将永久删除选中的条目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.projectList = this.projectList.filter(item => {
          return !this.multipleSelection.includes(item);
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

      showDialog() {
      this.dialogVisible = true;
    },
    addProject() {
      // 在这里处理添加逻辑，例如发送请求到服务器
      console.log('Adding project:', this.form);
      // 重置表单
      this.form = {
        category: '',
        productName: '',
        standardNumber: '',
        standardName: ''
      };
      // 关闭弹窗
      this.dialogVisible = false;
    },

      deleteRow(index, rows) {
        this.$confirm('此操作将永久删除该条目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      viewDetails(row) {
        console.log('查看详情:', row);
        // 这里可以跳转到详情页面或弹窗显示详细信息
      },
      exportExcel() {
      // 创建一个新的工作簿
      const wb = XLSX.utils.book_new();

      // 将数据转换为工作表
      const ws = XLSX.utils.json_to_sheet(this.projectList, {
        header: ["序号", "项目名称", "标准编号（含年号）"]
      });

      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(wb, ws, "项目列表");

      // 生成Excel文件
      XLSX.writeFile(wb, "项目列表.xlsx");
    }
    }
  };
  </script>
  
  <style scoped>
  .app-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 根据需要调整高度 */
}

.search-buttons-container {
  display: flex;
  margin-bottom: 10px; /* 根据需要调整间距 */
}
  </style>
  